<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
   <!-- 引入element样式 -->
   <!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->
</head>
<body>
<!-- loader Start -->
<div id="loading">
   <div id="loading-center">
   </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper" id="content">
   <!-- Sidebar  引入公共列表-->
   <div th:include="public_user::list" class="iq-sidebar"></div>
   <!-- Responsive Breadcrumb End-->
   <!-- Page Content  -->
   <div id="content-page" class="content-page">
      <!-- TOP Nav Bar  引入公共头部-->
      <div th:include="public_user::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">志愿服务列表</h4>
                           </div>
                        </div>
                     </div>
                  </div>

                  <div class="col-sm-6 col-md-3" v-for="(vol) in list">
                     <div class="iq-card">
                        <div class="iq-card-body text-center">
                           <div class="doc-profile">
                              <img v-if="vol.volImg==null" th:src="@{/images/user/07.jpg}" class="rounded-circle img-fluid avatar-80" alt="profile">
                              <img v-if="vol.volImg!=null" :src="'../upload/'+vol.volImg" style="width: 100px;height: 100px;" class="rounded-circle img-fluid avatar-80" alt="profile">
                           </div>
                           <div class="iq-doc-info mt-3">
                              <h4 v-text="vol.volName"></h4>
                              <p class="mb-0" v-text="vol.userInfo.name"></p>
                              <p class="mb-0" v-text="myFormatDate(vol.createTime)"></p>
                              <a href="#" v-text="vol.userInfo.phone"></a>
                           </div>
                           <div class="iq-doc-description mt-2">
                              <!--   fixme: 内容太长会改变样式 解决方案是截取字符串         -->
                              <p class="mb-0" v-text="subMsg(vol.volMsg)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor non erat non gravida. In id ipsum consequat</p>
                           </div>
                           <div class="iq-doc-social-info mt-3 mb-3">
                              <ul class="m-0 p-0 list-inline">
                                 <li><a v-text="vol.state">1</a></li>
                                 <li><a>/</a> </li>
                                 <li><a v-text="vol.userNeed">5</a></li>
                              </ul>
                           </div>
                           <button type="button"  @click="getThis(vol)" class="btn btn-primary">接取</button>
                           <!-- Button trigger modal -->
                           <button type="button" @click="showMsg(vol.volMsg)" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                              查看
                           </button>
                        </div>
                     </div>
                  </div>

                  
               </div>


               <!-- Modal -->
               <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h5 class="modal-title" id="exampleModalLongTitle">详细信息</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                           </button>
                        </div>
                        <div class="modal-body" v-text="volMsg">
                           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        </div>
                        <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                     </div>
                  </div>
               </div>


            </div>
            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item">
                              <nav aria-label="Page navigation example">
                                 <ul class="pagination mb-0">
                                    <li v-bind:class="{'disabled': (pageNum == 1)}" @click="getList(pageNum-1)" class="page-item">
                                       <a class="page-link" href="#" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                       </a>
                                    </li>
                                    <!--                                       <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
                                    <!--                                       <li class="page-item"><a class="page-link" href="#">2</a></li>-->
                                    <!--                                       <li class="page-item"><a class="page-link" href="#">3</a></li>-->

                                    <li class="page-item" v-if="pageNum > 6"><span>...</span></li>
                                    <li class="page-item" v-for="i of pages" v-if="i > pageNum-6 && i < pageNum+6" @click="getList(i)" v-bind:class="{'active': (i==pageNum)}">
                                       <a class="page-link" href="javascript:void(0)" v-text="i">1</a>
                                    </li>
                                    <li class="page-item"  v-if="pageNum < pages-5"><span>...</span></li>

                                    <li v-bind:class="{'disabled': (pageNum == pages)}" @click="getList(pageNum+1)" class="page-item">
                                       <a class="page-link" href="#" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                       </a>
                                    </li>

                                    <li class="page-item disabled"><span v-text="'总页数：'+ pages">总页数：1</span></li>
                                 </ul>
                              </nav>
                           </li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/js/jquery.min.js}"></script>
      <script th:src="@{/js/popper.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/js/waypoints.min.js}"></script>
      <script th:src="@{/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/js/lottie.js}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/js/custom.js}"></script>


      <!--      <script th:src="@{/js/vue.js}"></script>-->
      <!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
      <!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script th:src="@{/js/axio.js}"></script>
      <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
      <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>

      <script>
         new Vue({
            el: "#content",
            data: {
               pageNum: 1,  //第几页
               pageSize: 20, //每页几条
               pages: 1, // 页面总数
               total: 0,  // 记录行数
               list: [],  // 数据
               volMsg:''

            },
            mounted(){
               this.getList(1);
            },
            methods:{
               getList(pageNum){
                  // 发送ajax请求，尝试登录
                  let url = rootUrl+`vol/getUserList?pageNum=${pageNum}&pageSize=${this.pageSize}`;
                  console.log(url);
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             let pageInfo = data.data;
                             this.pageNum = pageInfo.pageNum;
                             this.pageSize = pageInfo.pageSize;
                             this.pages = pageInfo.pages;
                             this.total = pageInfo.total;
                             this.list = pageInfo.list;
                             console.log(this.list);
                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               myFormatDate(value){//处理日期格式
                  let dt = new Date(value);
                  let year = dt.getFullYear();
                  let month = (dt.getMonth() + 1).toString().padStart(2,'0');
                  let date = dt.getDate().toString().padStart(2,'0');
                  let hour = dt.getHours().toString().padStart(2,'0');
                  let minute = dt.getMinutes().toString().padStart(2,'0');
                  let second = dt.getSeconds().toString().padStart(2,'0');
                  return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
               },
               subMsg(msg){
                  let newMsg = msg.substring(0,10);
                  newMsg = newMsg +'...';
                  return newMsg;
               },
               showMsg(msg){
                  this.volMsg = msg;
               },
               getThis(vol){
                  if (vol.state>=vol.userNeed){
                     this.open3("该志愿服务人员已满！");
                     return;
                  }else {
                     let url = rootUrl+`vol/getVol`;
                     axios.post(url,vol)
                             .then(response => {
                                let data = response.data;
                                if (data.code !== 0) {
                                   this.open3(data.msg);
                                   return;
                                }
                                vol.state = vol.state+1;
                                this.open2("获取成功！")
                                console.log(data);
                             })
                             .catch(error => {
                                alert(error);
                             });
                  }

               }
               ,
               open1(msg) {
                  this.$message({
                     showClose: true,
                     message: msg
                  });
               }, // 提示
               open2(msg) {
                  this.$message({
                     showClose: true,
                     message: msg,
                     type: 'success'
                  });
               }, // 成功
               open3(msg) {
                  this.$message({
                     showClose: true,
                     message: msg,
                     type: 'warning'
                  });
               }, // 警告
               open4(msg) {
                  this.$message({
                     showClose: true,
                     message: msg,
                     type: 'error'
                  });
               }, // 错误
            }
         })
      </script>
   </body>
</html>